<template>
	<view class="content">
		<view class="head">
			<u-navbar leftIcon="arrow-leftward" @leftClick="leftClick">
				<view class="u-nav-slot" slot="right">
					<image @click="share" src="@/static/images/share.png" mode=""></image>
					<view class="news" @click="toquote">
						<image class="img2" src="@/static/images/quotationcar.png" mode="">
						</image>
						<view class="red-news" v-if="quotenums>0">
							{{quotenums}}
						</view>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="" style="width: 100vw;height: 110rpx;">

		</view>
		<view class="merry-go-round">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration" indicator-color="#E5E7FA"
					indicator-active-color="#645AED">
					<swiper-item>
						<view class="swiper-item">
							<image style="background-size: cover" :src="getFirstImageLink(good.goods_images)[activeindex]" mode="aspectFit"
								@click="previewImg(getFirstImageLink(good.goods_images)[activeindex])"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="good-images">
					<view class="item" :class="{'active':activeindex===index}"
						v-for="(item,index) in getFirstImageLink(good.goods_images)" :key="index"
						@click="activeindex=index">
						<image lazy-load :src="item" mode="aspectFit"></image>
					</view>

				</view>
			</view>
		</view>
		<view class="good-title">
			{{good.goods_name}}
		</view>
		<view class="price">
			<view class="p-l" v-if="islogin&&personal.personal_price">
        <!--        您的價格：MOP {{good.shop_price}}-->
                您的價格：MOP {{personal.personal_price}}
			</view>
      <view class="p-l" v-else></view>
			<view class="p-r" @click="collect">
				<!-- 未收藏 -->
				<image v-if="!good.collection>0" src="@/static/images/collect_normal.png" mode=""></image>
				<image v-else src="@/static/images/collect_pressed.png" mode=""></image>

			</view>
		</view>
		<view class="goodno">
			商品編號：{{good.goods_sn}}
		</view>
		<view class="border"></view>
		<view class="specifications">
			<view class="s-l">
				規格
			</view>
			<view class="s-r" @click="open">
				<text style="margin-right: 12rpx;">選擇顏色，尺寸</text>
				<u-icon size="28rpx" name="arrow-right"></u-icon>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-popup :show="show" :closeable="true" :round="10" mode="bottom" @close="close" @open="open">
			<view class="dialog">
				<view class="d-top">
					<view class="top-l">
						<image :src="getFirstImageLink(good.goods_images)[0]" mode="aspectFit"></image>
					</view>
					<view class="top-r">
						<view class="price">
              <view v-if="islogin&&personal.personal_price">
                您的價格：MOP {{ personal.personal_price }}
              </view>
            </view>
						<view class="select" v-if="attr3[activeColor]">
							已選：{{attr3[activeColor].attr_value}}
						</view>
					</view>
					<view class="inventory">
            庫存{{good.goods_number}}件
					</view>
				</view>
				<view class="title" v-if="attr3.length>0">
          顔色
				</view>
				<view class="select-btn">
					<view class="btn" :class="{'active':activeColor==index}" v-for="(item,index) in attr3" :key="index"
						@click="activeColorbtn(index)">
						{{item.attr_value}}
					</view>
				</view>
				<view class="title">
					<view>
            購買數量
					</view>
					<view class="add">
						<view class="stepper">
							<view class="stepper-btn" @click="decrement">
								<image src="@/static/images/quantity_reduce.png" mode=""></image>
							</view>
							<!-- <view class="stepper-value">{{ num }}</view> -->
							<input style="width:100rpx;  text-align: center;
							font-size: 30rpx;
							font-weight: 500;
							color: #333333;" v-model="num" @blur="leavinput" type="number">
							<view class="stepper-btn" @click="increment">
								<image src="@/static/images/quantity_add.png" mode=""></image>
							</view>
							<view class="stepper-value">/{{good.unit}}</view>
						</view>

					</view>

				</view>
				<view class="d-bottom">
					<view class="btn-l" @click="addquotebtn">
						加入報價車
					</view>
					<view class="btn-r" @click="addcartbtn">
						加入購物車
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <view class="border"></view> -->
		<!-- 		<view class="specifications">
			<view class="s-l">
				評價（4）
			</view>
			<view class="s-r">
				<text style="margin-right: 12rpx;">查看全部</text>
				<u-icon size="28rpx" name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="evaluate">
			<view class="user">
				<image src="@/static/images/u=2436369410,2358044874&fm=11&gp=0.png" mode=""></image>
				<view>yuan10</view>
			</view>
			<view class="score">
				<view>
					評分：
				</view>
				<u-rate active-color="#645AED" inactive-color="#b2b2b2" gutter="1"></u-rate>
			</view>
			<view class="comment">
				筆很好用
			</view>
			<view class="comment-img">
				<image v-for="item in 3"
					src="@/static/images/a28676495bc579814980194027ade48c_u=3798371013,2591748572&fm=15&gp=0.png"
					mode=""></image>
			</view>
		</view> -->
		<view class="border"></view>
		<view class="specifications">
			<view class="s-l">
				相關推薦
			</view>
		</view>
		<scroll-view class="good_cover" scroll-x="true">
			<view class="good-item" v-for="(item,index) in recommend" :key="index" @click="toDetails(item.goods_id)">
				<view class="item-top">
					<image lazy-load :src="getFirstImageLink(item.goods_images)[0]" mode="aspectFit"></image>
				</view>
				<view class="item-center">
					{{item.goods_name}}
				</view>
			</view>
		</scroll-view>
		<view class="border"></view>
		<view class="specifications">
			<view class="s-l">
				商品詳情
			</view>
		</view>
		<view class="details">
			<view class="">
				品牌：{{good.brand_name}}
			</view>
			<view class="" v-if="good.goods_desc">
				<view class="" style="" v-html="formatRichText(good.goods_desc)">

				</view>
			</view>
			<view class="">
				<!-- 材质：塑料刀壳 -->
			</view>
			<view class="">
				<!-- 规格：大号 -->
			</view>
		</view>
		<view class="bottom">
			<view class="service" @click="callphone">
				<image style="width: 44rpx;height: 44rpx;" src="@/static/images/tabbar_service.png" mode=""></image>
				<view class="text">
					客服
				</view>
			</view>
			<view class="service" @click="tocart">
				<view class="cart">
					<image style="width: 44rpx;height: 44rpx;" src="@/static/images/tabber_shoppingcart.png" mode="">
					</image>
					<view class="nums" v-if="cartnums>0">
						{{cartnums}}
					</view>
				</view>
				<view class="text">
          購物車
				</view>
			</view>
<!--			<view class="add-l" @click="show=true">-->
<!--				加入報價車-->
<!--			</view>-->
			<view style="margin-right: 32rpx;" class="add-r" @click="show=true">
				加入購物車/報價車
			</view>
		</view>
	</view>

</template>

<script>
	import {
		goodDetails,
		recommend
	} from '@/network/api/home.js'
	import {
		addcart,
		addquote_cart,
		collection,

	} from '@/network/api/cart.js'
	import {
		mapActions,
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {
				attr1: [], //规格
				attr3: [], //颜色
				activeColor: 0,
				activeindex: 0,
				num: 1,
				show: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				goods_id: '',
				good: {},
        recommend: [],
        personal:{},
			}
		},
		onLoad(e) {
			this.goods_id = e.goods_id

		},
		onShow() {
			this.goodDetails()
			this.getCart()
			this.getQuoteCart()
		},
		computed: {
			...mapState({
				islogin: state => state.user.islogin,
				company: state => state.user.company,
				userinfo: state => state.user.userinfo,
				cartnums: state => state.user.cartnums,
				quotenums: state => state.user.quotenums,
			})
		},
		methods: {
			formatRichText(html) {
				let newContent = html
					.replace(/<img/gi, '<img style="width:100%;height:auto;display:block;"')
					.replace(/<div style="/gi, '<div style="width:100%;word-break:break-all;word-wrap:normal;')
					.replace(/\s{2,}/g, "")
					.replace(/<table/gi, '<table style="width:100%;table-layout:fixed;"')
					.replace(/<td/gi, '<td style="word-wrap:break-word;');

				return newContent;
			},
			callphone() {
				uni.showModal({
					title: '提示',
					content: '撥打客服電話28362020？',
					success: function(res) {
						if (res.confirm) {
							//#ifdef MP-WEIXIN
							uni.makePhoneCall({
								phoneNumber: '28362020'
							});
							//#endif
							//#ifdef APP-PLUS
							plus.device.dial('28362020', true);
							//#endif
						} else if (res.cancel) {}
					}
				});
			},
			leavinput() {
				if (this.num < 1) {
					this.num = 1
					uni.showToast({
						title: '最少不能低于壹件商品',
						icon: 'none'
					})
				}
				// if (this.num > this.good.goods_number) {
				// 	this.num = 1
				// 	uni.showToast({
				// 		title: `商品庫存不足請重新輸入`,
				// 		icon: 'none'
				// 	})
				// }
			},
			toquote() {
				uni.navigateTo({
					url: '/pages/quotacar/index'
				})
			},
			previewImg(photoImg) {
				let imgsArray = [];
				imgsArray[0] = photoImg;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			//分享
			share() {
				let good=this.good
				// #ifdef APP
				    uni.share({
				        provider:'weixin',//分享服务提供商（即weixin|qq|sinaweibo）
				        type:0,//图文
				        scene:'WXSceneSession',//provider 为 weixin 时必选 WXSceneSession分享到聊天界面，WXSceneTimeline分享到朋友圈，WXSceneFavorite分享到微信收藏
				        title:good.goods_name,//分享内容的标题
				        summary:'澳門新極速文具文儀有限公司',//分享内容的摘要
				        href:`https://www.newfaststationery.com/#/pdetail?id=${good.goods_id}`,//跳转链接，type 为 0 时必选
				        imageUrl:this.getFirstImageLink(good.goods_images),//图片地址，type 为 0、2、5 时必选
				        success(res) {
				            //成功返回的参数
							uni.showToast({
								title:'分享成功',
							})
				        },
				        fail(err) {
				            //失败返回的参数
				            console.log(err);
				        }
				    })
				// #endif
			},
			//收藏
			async collect() {
				if (!this.islogin) {
					return uni.showToast({
						title: '請先登錄',
						icon: 'none'
					})
				}
				let data = {
					user_id: this.userinfo.id,
					goods_id: this.good.goods_id,
					goods_sn: this.good.goods_sn,
					goods_name: this.good.goods_name,
				}
				const res = await collection(data)
				this.goodDetails()
				if (res.data.code == 1) {
					uni.showToast({
						title: '收藏成功',
						icon: 'none'
					})
				}
				if (res.data.code == 3) {
					uni.showToast({
						title: '取消收藏',
						icon: 'none'
					})
				}

			},
			tocart() {
        uni.setStorageSync('goods_id', this.goods_id)
				uni.switchTab({
					url: "/pages/shopping/index"
				})
			},
			// ...mapActions('order.getCart']),
			...mapActions(['getgoodDetails', 'toDetails', 'getCart', 'getQuoteCart']),
			async addcartbtn() {
				console.log(this.islogin);
				if (!this.islogin) return uni.showToast({
					title: '請先登錄',
					icon: 'none',
					duration: 2000 //持续时间为 2秒
				})

				let user = uni.getStorageSync('user')
				console.log(user);
				let cart = {
					user_id: user.userinfo.id,
					goods_id: this.good.goods_id,
					goods_number: this.num,
					goods_attr_id: this.attr3.length > 0 ? this.attr3[this.activeColor].goods_attr_id : '',
					goods_specification_id: this.good.goods_specification_id || ""
				}
				const res = await addcart(cart)
				console.log(res);
				if (res.data.code == 1) {
					this.getCart()
					uni.showToast({
						title: '添加成功',
						icon: 'success', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				} else if (res.data.msg) {
					uni.showToast({
						title: res.data.msg,
						icon: 'none', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				}
			},
			async addquotebtn() {
				if (!this.islogin) return uni.showToast({
					title: '請先登錄',
					icon: 'none',
					duration: 2000 //持续时间为 2秒
				})
				let user = uni.getStorageSync('user')
				let cart = {
					user_id: user.userinfo.id,
					goods_id: this.good.goods_id,
					goods_number: this.num,
					goods_attr_id: this.attr3.length > 0 ? this.attr3[this.activeColor].goods_attr_id : '',
					goods_specification_id: this.good.goods_specification_id || ""
				}
				const res = await addquote_cart(cart)
				if (res.data.code == 1) {
					uni.showToast({
						title: '添加成功',
						icon: 'success', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				} else if (res.data.msg) {
					uni.showToast({
						title: res.data.msg,
						icon: 'none', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				}
			},
			activeColorbtn(index) {
				this.activeColor = index
			},
			getFirstImageLink(links) {
				const linksArray = (links || '').split(",");
				console.log(linksArray);
				return linksArray
			},
			// 相关推荐商品列表
			async getrecommend() {
				const res = await recommend(this.good.cat_id)
				this.recommend = res.data.goods
			},
			async goodDetails() {
				console.log(this.userinfo.id, 'kkk');
				let data = {
					goods_id: this.goods_id,
					user_id: this.userinfo.id
				}
				const res = await this.getgoodDetails(data)
				console.log(res);
				this.good = res.good
        this.personal=res.personal
				this.attr1 = res.attr1
				this.attr3 = res.attr3
        await this.getrecommend()


			},
			//加
			increment() {
				this.num++
			},
			//减
			decrement() {
				if (this.num == 1) return;
				this.num--
			},
			open() {
				// console.log('open');
				this.show = true
			},
			close() {
				this.show = false
				this.activeColor = 0
				this.num = 1
			},
			leftClick() {
				uni.navigateBack({
					delta: 1
				})
			}
		},

	}
</script>

<style lang="scss">
	.content {

		position: relative;
		height: 100vh;
		width: 100%;
		overflow-x: hidden;
		/* 在较小的屏幕上应用不同的样式 */

		.head {
			.u-nav-slot {
				display: flex;
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				.news {
					margin-left: 44rpx;
					position: relative;

					.img2 {
						width: 44rpx;
						height: 44rpx;
					}

					.red-news {
						position: absolute;
						top: -25%;
						right: -50%;
						// width: 42rpx;
						height: 34rpx;
						background: #ED1B37;
						opacity: 1;
						border-radius: 17rpx;
						text-align: center;
						line-height: 34rpx;
						font-size: 14rpx;
						color: #FFFFFF;
					}
				}

			}
		}

		.merry-go-round {
			width: 100%;

			.uni-margin-wrap {
				width: 100%;

				.good-images {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					.item {
						margin-right: 11rpx;
						margin-top: 64rpx;
						width: 104rpx;
						height: 104rpx;
						background: #FFFFFF;
						border: 1rpx solid #DEDEDE;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							max-width: 99rpx;
							max-height: 99rpx;
						}
					}

					.active {
						border: 2rpx solid #7A7DEE;
					}
				}
			}

			.swiper {
				height: 650rpx;
			}

			.swiper-item {
				height: 650rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					max-width: 100vw;
					max-height: 650rpx;
				}
			}
		}

		.good-title {
			margin: 40rpx 32rpx;
			width: 686rpx;
			height: 96rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.price {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.p-l {
				font-size: 44rpx;
				margin-left: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #4949C3;
			}

			.p-r {
				image {
					width: 126rpx;
					height: 94rpx;
				}
			}
		}

		.goodno {
			font-size: 24rpx;
			margin-left: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 43rpx;
			color: #999999;
		}

		.border {
			margin: 32rpx;
			border-bottom: 1rpx solid #DEDEDE;
		}

		.dialog {
			// min-height: 500rpx;
			.d-top {
				display: flex;
				margin: 65rpx 32rpx 0 32rpx;
				position: relative;

				.top-l {
					width: 180rpx;
					height: 180rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 12rpx;

					image {
						max-width: 150rpx;
						max-height: 150rpx;
					}
				}

				.top-r {

					.price {
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 43rpx;
						color: #4949C3;
					}

					.select {
						margin: 16rpx 0;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 43rpx;
						color: #707070;
					}
				}

				.inventory {
					position: absolute;
					right: 0;
					bottom: 0;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}

			.d-bottom {
				margin: 15rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn-l {
					width: 335rpx;
					height: 80rpx;
					background: #FFFFFF;
					border: 1px solid #CBCBCB;
					border-radius: 24rpx;
					text-align: center;
					line-height: 80rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.btn-r {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					width: 335rpx;
					height: 80rpx;
					background: #645AED;
					text-align: center;
					line-height: 80rpx;
					border-radius: 24rpx;
				}
			}

			.title {
				margin: 32rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #707070;
				display: flex;
				justify-content: space-between;

				.add {
					.addone {
						width: 57rpx;
						height: 57rpx;
					}

					.stepper {
						display: flex;
						// align-items: center;
						// vertical-align: middle;
						align-items: center;

						.stepper-value {
							margin: 0 20rpx;
							font-size: 24rpx;
							line-height: 43rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						.stepper-btn {
							image {
								width: 44rpx;
								height: 44rpx;
							}
						}
					}
				}
			}

			.select-btn {
				margin-left: 32rpx;
				display: flex;
				flex-wrap: wrap;

				.btn {
					margin-bottom: 15rpx;
					margin-right: 32rpx;
					padding: 0 30rpx;
					height: 58rpx;
					background: #F5F6F9;
					opacity: 1;
					border: 1rpx solid #F5F6F9;
					text-align: center;
					line-height: 58rpx;
					border-radius: 16rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.active {
					border: 1rpx solid #645AED;
					background: #E5E7FA;
					color: #645AED;
				}

			}
		}

		.specifications {
			margin: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.s-l {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.s-r {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

		.evaluate {
			margin: 32rpx;

			.user {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;

				image {
					width: 34rpx;
					height: 34rpx;
					margin-right: 4rpx;
				}
			}

			.score {
				display: flex;
				margin: 16rpx 0;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 43rpx;
				color: #BEBEBE;
			}

			.comment {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 43rpx;
				color: #222222;
			}

			.comment-img {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				image {
					margin-bottom: 16rpx;
					width: 218rpx;
					height: 218rpx;
				}
			}
		}

		.good_cover {
			margin-left: 32rpx;
			margin-top: 32rpx;
			white-space: nowrap;
			overflow: hidden;
			width: 100%;

			.good-item {
				margin-right: 52rpx;
				display: inline-block;
				width: 164rpx;

				.item-top {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 164rpx;
					background: #FFFFFF;
					border: 1px solid #DEDEDE;
					border-radius: 30rpx;

					image {
						// width: 92.14rpx;
						// height: 222rpx;
						max-height: 126rpx;
					}
				}

				.item-center {
					margin-top: 16rpx;
					white-space: nowrap;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					text-overflow: ellipsis;
					overflow: hidden;
					max-width: 100%;
				}

				.item-bottom {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #4949C3;
				}
			}
		}

		.details {
			margin: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #707070;
			padding-bottom: 188rpx;
		}

		.bottom {
			width: 100%;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.service {
				text-align: center;

				.cart {
					position: relative;

					.nums {
						position: absolute;
						top: -25%;
						right: -20%;
						width: 42rpx;
						height: 34rpx;
						background: #ED1B37;
						opacity: 1;
						border-radius: 17rpx;
						text-align: center;
						line-height: 34rpx;
						font-size: 14rpx;
						color: #FFFFFF;
					}
				}

				.text {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					opacity: 1;
				}
			}


			.add-l {
				width: 243rpx;
				height: 80rpx;
				background: #FFFFFF;
				border: 1px solid #CBCBCB;
				opacity: 1;
				border-radius: 24rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 80rpx;
				color: #333333;
				text-align: center;
			}

			.add-r {
				width: 450rpx;
				height: 80rpx;
				background: #645AED;
				opacity: 1;
				border-radius: 30rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 80rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>
